<template>
	<view>
		<u-navbar
			title="我的资料"
			:autoBack="true"
			placeholder
		>
		</u-navbar>
		<scroll-view :scroll-y="true" :style="{height: scrollViewHeight}">
			<u-cell-group :border="false" :customStyle="{backgroundColor: '#fff'}">
				<u-cell size="large" title="头像">
					<u--image slot="value" shape="circle" mode="aspectFill" :src="userInfo.avatar" width="56rpx" height="56rpx"></u--image>
				</u-cell>
				<u-cell size="large" title="昵称" :value="userInfo.username"></u-cell>
				<u-cell size="large" title="手机号" :value="userInfo.phone"></u-cell>
			</u-cell-group>
		</scroll-view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		computed: {
			...mapState(['userInfo']),
			appColor() {
				return this.appPrimaryColor
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 + 'px';
			}
		},
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>